<template>
	<view class="main">
		<view class="hand">
			<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//dbleft.png" @click="blackbtn"></image>
		</view>
		<view class="show">
			<view class="sone">
				<view class="sonefoot">
					<view class="sfone">
						<view class="sfoneleft">
							<view class="sfoneleftfirst">{{this.projectName}}-{{this.areaName}}</view>
							<view :class="beitype=='0'?'sfoneleftsun':'sfoneleftsun1'" @click="bbtn">备注：{{this.marks}}</view>
						</view>
						<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//up.png" v-show="beitype==1&&this.marks.length>18" @click="bbtn"></image>
						<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//down.png" v-show="beitype==0&&this.marks.length>18" @click="bbtn"></image>
						<view class="sfoneright" @click="shuxin">
							刷新
						</view>
					</view>
					<view class="sftwo">
						<view class="sftworight">
							<view class="srbtn" @click="scan">添加设备</view>
						</view>
					</view>
				</view>
			</view>
			<view class="stwo">
				<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
				<van-list v-model="loading" :offset="300" :finished="finished" finished-text="没有更多了" @load="loadMore">
				<van-cell v-for="(item, index) in blist" :key="index" >
					<view class="stwotap">
						<view class="stwotapleft">
							<view class="stwotapone">
								<view class="stwotaponeleft">
									设备号：{{item.deviceId}}
								</view>
							</view>
							<view class="stwotapone">
								<view class="stwotaponeleft">
									创建时间：{{item.createTime}}
								</view>
							</view>
							<view class="stwotapone">
								<view class="stwotaponeleft">
									设备厂商：<span v-show="item.deviceFactory==0">福特</span>
								</view>
								<view class="stwotaponeleft">
									出入类型：<span v-show="item.outIn==0">入</span>
									<span v-show="item.outIn==1">出</span>
									<span v-show="item.outIn==2">出入</span>
								</view>
							</view>
						</view>
						
						<view class="stwotapright">
							<view class="stwotaprightfirst" @click="upbtn(item.id)">设置二维码</view>
							<view class="stwotaprightfirst" style="background-color: red;" @click="delbtn(item.id)">删除</view>
						</view>
					</view>
				</van-cell>
				</van-list>
				</van-pull-refresh>	
			</view>
		</view>
		<!-- 费率显示 -->
		<van-popup v-model="ashow">
			<view class="sfour">
				<view class="stwohand">
					添加设备<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//close.png" @click="showclose"></image>
				</view>
				<view class="stwofoot">
					<view class="kshow">
						<view class="kone">
							<input placeholder="设备编号" v-model="deviceId" />
						</view>
						<view class="ktwo">
							<van-collapse v-model="activeNames">
								<van-collapse-item :title=reason name="1" :title-class="classtap">
									<van-radio-group v-model="radio" @change="gobtn">
										<van-radio name="福特">福特</van-radio>
									</van-radio-group>
								</van-collapse-item>
							</van-collapse>
					
						</view>
						<view class="ktwo">
							<van-collapse v-model="activeNames1">
								<van-collapse-item :title=reason1 name="1" :title-class="classtap1">
									<van-radio-group v-model="radio1" @change="gobtn1">
										<van-radio name="出">出</van-radio>
										<van-radio name="入">入</van-radio>
										<van-radio name="出入">出入</van-radio>
									</van-radio-group>
								</van-collapse-item>
							</van-collapse>
											
						</view>
						<view class="ktwo">
							<view class="kbtn" @click="addbtn">
								添加
							</view>
						</view>
					</view>
				</view>
			</view>
		</van-popup>
	</view>
</template>

<script>
	// import wx from "../../common/jweixin-module/index.js"
	// import { Dialog } from 'vant';
	export default {
		components: {},
		mounted() {
			
		},

		data() {
			return {
				projectName:'',
				areaName:'',
				marks:'',
				marks1:'',
				beitype:0,
				areaId:'',//小区id
				blist:[],//设备列表
				loading: false,
				finished: false,
				refreshing: false,
				pageNum: 1, //页码
				pageSize: 10, //每页显示的条数
				ashow:false,
				activeNames: [''],
				radio: '', //设备厂商
				reason: '设备厂商',
				classtap:'tclass',
				activeNames1: [''],
				radio1: '', //门禁类型
				reason1: '门禁类型',
				classtap1:'tclass',
				deviceId:'',//设备号
			}
		},
		onShow() {
			this.firstone=false
		},
		onLoad(options) {
			this.projectName=options.projectName
			this.areaId=options.areaId
			this.areaName=options.areaName
			this.marks=options.marks
			this.marks1=options.marks
		},
		methods: {
			//返回上一页
			blackbtn() {
				uni.navigateBack()
			},
			shuxin(){
				this.blist=[];
				this.onRefresh();
			},
			bbtn(){
				if(this.beitype==0){
					this.beitype=1
				}else if(this.beitype==1){
					this.beitype=0
				}
			},
			scan(){
				this.ashow=true
			},
			showclose(){
				this.ashow=false
			},
			// 设备列表分页
			loadMore() {
				if (this.refreshing) {
				  this.blist = [];
				  this.refreshing = false;
				}
				let data = {
					areaId:this.areaId,
					pageNum:this.pageNum,
					pageSize:this.pageSize,
				}
				this.loading = true;
				this.$base.request1('manager/parkingEqupment/list', 'GET', data)
					.then(res => {
						this.loading = false;
						if(res.data.rows&&res.data.rows.length>0){
							var arr=res.data.rows
							this.blist = this.blist.concat(arr);
							this.pageNum += 1;
						}else{
							this.finished = true;
						}
					})
					.catch(err => {
				
					})
			},
			onRefresh() {
			     // 清空列表数据
			     this.finished = false;
				 this.pageNum=1
			     // 重新加载数据
			     // 将 loading 设置为 true，表示处于加载状态
			     this.loading = true;
			     this.loadMore();
			},
			gobtn() {
				this.reason = this.radio
				this.activeNames = ['']
				this.classtap='tclass1'
			},
			gobtn1() {
				this.reason1 = this.radio1
				this.activeNames1 = ['']
				this.classtap1='tclass1'
			},
			addbtn(){
				var deviceFactory=0
				if(this.radio=='福特'){
					deviceFactory=0
				}
				var outIn=0
				if(this.radio1=='入'){
					outIn=0
				}else if(this.radio1=='出'){
					outIn=1
				}else if(this.radio1=='出入'){
					outIn=2
				}
				if(this.deviceId==''){
					this.$toast.fail('请输入设备编号')
					return
				}
				if(this.radio==''){
					this.$toast.fail('请选择设备厂商')
					return
				}
				if(this.radio1==''){
					this.$toast.fail('请选择门禁类型')
					return
				}
				
				let data={
					areaId:this.areaId,
					deviceId:this.deviceId,
					deviceFactory:deviceFactory,
					outIn:outIn
				}
				uni.showLoading({
					title: '请稍候',
					mask: true
				})
				this.$base.request1('manager/parkingEqupment/add', 'POST', data)
				.then(res => {
					uni.hideLoading()
					if(res.data.code==200){
						this.$toast.success('添加成功')
						this.ashow=false
						this.shuxin()
					}else{
						this.$toast.fail('添加失败,'+res.data.msg)
					}
					
				})
				.catch(err => {
			
				})
			},
			upbtn(id){
				let data={
					id:id
				}
				uni.showLoading({
					title: '请稍候',
					mask: true
				})
				this.$base.request1('manager/parkingEqupment/sendQrCode', 'POST', data)
				.then(res => {
					uni.hideLoading()
					if(res.data.code==200){
						this.$toast.success('设置成功')
					}else{
						this.$toast.fail('设置失败,'+res.data.msg)
					}
					
				})
				.catch(err => {
							
				})
			},
			delbtn(id){
				let data={
					id:id
				}
				uni.showLoading({
					title: '请稍候',
					mask: true
				})
				this.$base.request1('manager/parkingEqupment/remove', 'DELETE', data)
				.then(res => {
					uni.hideLoading()
					if(res.data.code==200){
						this.$toast.success('删除成功')
						this.shuxin()
					}else{
						this.$toast.fail('删除失败,'+res.data.msg)
					}
					
				})
				.catch(err => {
							
				})
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		width: 100%;
		/deep/.van-list__finished-text{
			line-height: 500upx;
		}
		.hand{
			width: 100%;
			background-color: #4B98ED;
			height: 62upx;
			font-size: 30upx;
			font-family: PingFang SC Bold, PingFang SC Bold-Bold;
			font-weight: 700;
			text-align: center;
			line-height: 62upx;
			color: #ffffff;
			position: relative;
			image{
				width:22upx;
				height: 39upx;
				position: absolute;
				left: 31upx;
				top: 11upx;
			}
		}
		.show{
			width: 100%;
			box-sizing: border-box;
			/deep/.van-popup{
				border-radius: 16upx;
			}
			.sone{
				width: 100%;
				height: 110upx;
				background-color: #4b98ED;
				margin-bottom: 136upx;
				.sonefoot{
					width: 686upx;
					border-radius: 8upx;
					box-shadow: 0upx 2upx 9upx 0upx rgba(22,22,22,0.1); 
					background-color: #FFFFFF;
					box-sizing: border-box;
					margin: 0 auto;
					.sfone{
						width: 100%;
						box-sizing: border-box;
						display: flex;
						justify-content: space-between;
						padding: 29upx 24upx;
						border-bottom: 1upx solid #d1d1d1;
						image{
							width: 28.16upx;
							height: 17.92upx;
							margin-top: 50upx;
						}
						.sfoneleft{
							
							.sfoneleftfirst{
								font-size: 32upx;
								font-family: PingFang SC Bold, PingFang SC Bold-Bold;
								font-weight: 700;
								color: #333333;
								width: 500upx;
								overflow: hidden;
								text-overflow:ellipsis;
								white-space: nowrap;
							}
							
							.sfoneleftsun{
								font-size: 25upx;
								font-family: PingFang SC Bold, PingFang SC Bold-Bold;
								color: #757575;
								font-weight: 400;
								width: 500upx;
								overflow: hidden;
								text-overflow:ellipsis;
								white-space: nowrap;
								
							}
							.sfoneleftsun1{
								font-size: 25upx;
								font-family: PingFang SC Bold, PingFang SC Bold-Bold;
								color: #757575;
								font-weight: 400;
								width: 500upx;
								word-break:break-all;
							}
						}
						.sfoneright{
							font-size: 28upx;
							font-family: PingFang SC Medium, PingFang SC Medium-Medium;
							font-weight: 500;
							color: #333333;
						}
					}
					.sftwo{
						box-sizing: border-box;
						padding-bottom: 100upx;
						position: relative;
						.sftworight{
							position: absolute;
							right: 20upx;
							bottom: 0upx;
							.srbtn{
								width: 128upx;
								height: 48upx;
								border-radius: 8upx;
								font-size: 24upx;
								font-family: PingFang SC Bold, PingFang SC Bold-Bold;
								font-weight: 700;
								text-align: center;
								line-height: 48upx;
								color: #ffffff;
								background-color: #4B98ED;
								margin-bottom: 18upx;
							}
						}
					}
				}
				
			}
			.stwo{
				width: 100%;
				margin-bottom: 150upx;
				margin-top: 50upx;
				/deep/.van-cell{
					line-height: 42upx;
				}
				/deep/.van-cell:not(:last-child)::after{
						border-bottom: 0upx solid #FFFFFF;
				}
					
				
				.stwotap{
					width: 686upx;
					border-radius: 8upx;
					box-shadow: -1upx 4upx 9upx 0upx rgba(66,66,66,0.17); 
					margin:10upx auto;
					padding: 10upx 20upx;
					box-sizing: border-box;
					display: flex;
					justify-content: space-between;
					.stwotapleft{
						.stwotapone{
							box-sizing: border-box;
							display: flex;
							margin-bottom: 6upx;
							.stwotaponeleft{
								font-size: 25upx;
								font-family: PingFang SC Bold, PingFang SC Bold-Bold;
								font-weight: 700;
								color: #333333;
								margin-right: 40upx;
							}
						}
					}
					
					.stwotapright{
						.stwotaprightfirst{
							padding: 10upx 20upx;
							border-radius: 8upx;
							font-size: 24upx;
							font-family: PingFang SC Bold, PingFang SC Bold-Bold;
							font-weight: 700;
							text-align: center;
							color: #ffffff;
							background-color: #4B98ED;
							margin-bottom: 18upx;
						}
					}
					
					
				}
			}
		}
		/deep/.van-popup{
			border-radius: 16upx;
		}
		.sfour{
			width: 686upx;
			.stwohand{
				width: 100%;
				height: 64upx;
				background-color: #4B98ED;
				font-size: 32upx;
				font-family: PingFang SC Bold, PingFang SC Bold-Bold;
				font-weight: 700;
				line-height: 64upx;
				color: #ffffff;
				box-sizing: border-box;
				padding: 0 34upx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				image{
					width: 25upx;
					height: 25upx;
				}
			}
			.stwofoot{
				width: 100%;
				box-sizing: border-box;
				padding: 43upx 36upx;
				box-sizing: border-box;
				.kshow {
					// width: 686upx;
					margin: 0 auto;
					margin-top: 51upx;
				
					.kone {
						width: 100%;
						margin-bottom: 40upx;
						border-radius: 24upx;
						box-sizing: border-box;
						padding: 20upx 36upx;
						border:  2upx solid #d1d1d1;
						input {
							font-size: 30upx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #909090;
						}
				
					}
				
					.ktwo {
						width: 100%;
						box-sizing: border-box;
						background-color: #d1d1d1;
						border-radius: 24upx;
						margin-bottom: 40upx;
						.kbtn{
							height: 45px;
							border-radius: 4px;
							box-shadow: -1upx 6upx 9upx 0upx rgba(75,152,237,0.44);
							font-size: 16px;
							font-family: PingFang SC Bold, PingFang SC Bold-Bold;
							font-weight: 700;
							text-align: center;
							line-height: 45px;
							margin: auto;
							color: #ffffff;
							background-color: #4B98ED;
						}
						/deep/.van-collapse-item{
							background-color: #d1d1d1;
							border-radius: 24upx;
						}
						/deep/.tclass{
							font-size: 28upx;
							font-family: PingFang SC Medium, PingFang SC Medium-Medium;
							font-weight: 700;
							color: #666;
						}
						/deep/.tclass1{
							font-size: 28upx;
							font-family: PingFang SC Medium, PingFang SC Medium-Medium;
							font-weight: 700;
							color: #111;
						}
				
						/deep/.van-cell {
							padding: 29upx 36upx;
							box-sizing: border-box;
							background: #d1d1d1;
							border-radius: 24upx;
						}
				
						/deep/.van-radio__label {
							font-size: 30upx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #666;
							margin-left: 90upx;
							margin-top: 18upx;
						}
				
						/deep/.van-radio__icon {
							height: 20upx!important;
							/deep/.van-icon {
								width: 20upx;
								height: 20upx;
								border: 1upx solid #cccccc;
							}
				
							margin-left: 80upx;
						}
						/deep/.van-collapse-item__content{
							background-color: #d1d1d1;
							border-radius: 24upx;
							
						}
						/deep/.van-hairline--top-bottom::after{
							border-width: 0upx;
						}
						/deep/.van-radio {
							// margin-bottom: 15upx;
							height: 70upx;
							align-items: center;
						}
				
						/deep/.van-collapse-item__wrapper {
							margin-bottom: 10upx;
				
						}
						/deep/.van-cell:not(:last-child)::after{
							border-bottom: 0upx;
						}
						/deep/.van-radio__icon--checked .van-icon{
							background-color: #4B98ED;
							border-color: #4B98ED;
						}
						/deep/.van-radio__icon--round .van-icon{
							border: 2upx solid #666;
						}
					}
				}
			}
		}
		
		
	}
</style>
